<template>
  <div class="dashboard-editor-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-dialog  :title="titleMsg" v-if="openMsg"
                  :visible.sync="openMsg"
                  :close-on-click-modal ="false"
                  width="1200px"
                  height="500px" >
    <!--    <editor  v-model="msg" :min-height="192"/>-->
        <monaco-editor ref="monacoEditor"
                       style="border:1px solid #000;"
                       :opts="opts"></monaco-editor>
       <!-- <el-input v-model="msg" :readonly="true" rows="20" cols="150"  type="textarea"  style="font-size: 14px;
         font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif"/>-->
        <div slot="footer" class="dialog-footer">
          <el-button @click="openMsg = false">关 闭</el-button>
        </div>
      </el-dialog>
     <!-- <el-col :xs="8" :sm="8" :lg="24" v-if="notice">
        <div  class="chart-wrapper">
          <p >系统通知</p>
          <monaco-editor ref="monacoEditor"
                         style="border:1px solid #000;"
                         :opts="opts"></monaco-editor>
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :lg="24" v-if="notice2">
        <div  class="chart-wrapper">
          <p >系统检查信息</p>
          <monaco-editor ref="monacoEditor"
                         style="border:1px solid #000;"
                         :opts="opts2"></monaco-editor>
        </div>
      </el-col>-->
      <el-col :xs="20" :sm="20" :lg="24" >
        <p>报表世界数据统计信息</p>
        <panel-group @handleSetLineChartData="handleSetLineChartData" />
        <line-chart :chart-data="lineChartData" />
      </el-col>
    </el-row>
    <!--<el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  import RaddarChart from './dashboard/RaddarChart'
  import PieChart from './dashboard/PieChart'
  import BarChart from './dashboard/BarChart'
  import { getCountVersion,getNoticeInfo } from "@/api/statistics";
  import monacoEditor from '@/components/SqlEditor';
  import watermark from "@/utils/water.js";

  const lineChartData = {
    table: {expectedData:[]},
    sqlScript: {expectedData:[]},
    dataSql: {expectedData:[]}/*,
  shoppings: {
    expectedData: [130, 140, 141, 142]
  }*/
  }
  export default {
    name: 'Index',
    components: {
      PanelGroup,
      LineChart,
      RaddarChart,
      PieChart,
      BarChart,
      monacoEditor,
      watermark
    },
    mounted(){
      // 添加水印
      watermark.set(localStorage.getItem("username"),"赢时胜报表世界数据管理平台")
      this.getCountVersion();
      this.getNoticeInfo();
    },
    data() {
      return {
        openMsg:false,
        titleMsg: "",
        msg:"",
        lineChartData: lineChartData.table,
        opts: { //编辑器
          value: '',
          readOnly: false, // 是否可编辑
          language: 'text', // 语言类型
          theme: 'vs', // 编辑器主题
          lineNumbers: "off", // 行号 取值
          height: 430,
          readOnly: true
        },
        /* opts2: { //编辑器
           value: '',
           readOnly: false, // 是否可编辑
           language: 'text', // 语言类型
           theme: 'vs', // 编辑器主题
           lineNumbers: "off", // 行号 取值
           height: 220,
           readOnly: true
         },
         notice: false,
         notice2: false*/
      }
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      getCountVersion() {
        getCountVersion().then(response => {
          lineChartData.table.expectedData=response.table;
         lineChartData.dataSql.expectedData=response.dataSql;
         lineChartData.sqlScript.expectedData=response.sqlScript;
      });
      },
      getNoticeInfo(){
        this.$notify.clear;
        getNoticeInfo().then(response => {
       /*   if(response.checkInfoNotice){
          this.notice2= true;
          this.opts2.value=response.checkInfoNotice;
        }*/
        var _this = this; //函数作用域问题
        if(response.systemInfoNotice){
          //notification_1关闭第一个消息,notification_2为关闭第二个消息以此类推
          for (let index in response.systemInfoNotice) {
            this.$notify.close('notification_'+(parseInt(index)+1), function (instance) {
              setTimeout(function () {
                instance.dom.remove();
              }, 0);
            });
          }
          for (let index in response.systemInfoNotice) {
            let noticeTitle;
            if(response.systemInfoNotice[index].noticeTitle.length > 12){
              noticeTitle =response.systemInfoNotice[index].noticeTitle.substring(0, 12)+ "..." ;
            }else{
              noticeTitle=response.systemInfoNotice[index].noticeTitle.substring(0, 15);
            }
            const h = this.$createElement;
            let noticeType=response.systemInfoNotice[index].noticeType;
            setTimeout(() => {
              this.$notify({
              type: noticeType,
              title:noticeTitle,
              clean: true,
              width:'300px',
              position:'bottom right',
              dangerouslyUseHTMLString:true,
              //  message: response.systemInfoNotice[index].noticeContent.substring(0, 180),
              message: h('p', null, [
                h('div', { class: 'btn-left' }, [
                /*h('button', { on: {  click: function() { _this.viewNotice(response.systemInfoNotice[index].noticeContent,noticeTitle) }},
                  class: 'el-button el-button--small'}, '暂不处理'),*/
                h('button', { on: { click: function() { _this.viewNotice(
                      response.systemInfoNotice[index].noticeContent,
                      response.systemInfoNotice[index].noticeTitle,
                      noticeType) } },
                  class: 'el-button el-button--primary el-button--small' }, '详情')
                ])
              ]),
              duration:15000,
              customClass:'fontClass1',
              iconClass:'iconClass',
              onClick(){
               // _this.viewNotice(response.systemInfoNotice[index].noticeContent,noticeTitle)
              }
            });
            }, 0);
          }
          }
      });
      },
      viewNotice(msg,titleMsg,type){
        this.$notify({
          type: type,
          title:titleMsg,
          clean: true,
          position:'top-right',
          dangerouslyUseHTMLString:true,
          message: msg,
          duration:0,
          customClass:'fontClass2',
          iconClass:'iconClass',
        });
      }
    },

  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  .btn-left {
    text-align: left;
    position: relative;
    left: 180px;
  }
</style>
<style lang="scss">
  .iconClass{
    font-size: 12px;
    font-family: "Inconsolata", "Menlo", "Consolas", monospace;
  }
  .fontClass1{
    width: 300px;
    height: 80px;
    font-size: 8px;
    font-family: Arial;
  }
  .fontClass2{
    width: 1200px;
    height: 800px;
    font-size: 8px;
    margin-right: 150px;
    overflow:auto;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
</style>
